<template>
	<view class="tab_head">
		<text @click="barTap(index)" v-for="(headItem, index) in headItems" :key="index" :class="['tab_head-item', activeIndex == index ? 'active' : '']">
			{{ headItem.title }}
		</text>
	</view>
</template>

<script>
export default {
	props: {
		headItems: {
			type: Array,
			default: function() {
				return [];
			}
		},
		activeIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	watch: {},
	methods: {
		barTap(activeIndex) {
			this.$emit('barTap', activeIndex);
		}
	}
};
</script>

<style lang="scss" scoped>
.c_blue {
	color: #377cfd;
}
.tab_head {
	background-color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	font-size: 24upx;
	color: #333;
	padding: 4upx 0;
	 box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);
	&-item {
		line-height: 50upx;
		&.active {
			border-bottom: 4upx solid #377cfd;
		}
	}
}
</style>

